﻿@{
    ViewBag.Title = "Import Roster";
}

<h2>Import Roster</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<p>To complete roster import, please select the appropriate headers for Student IDs and Sections:</p>

<div class="selector">
<h3>Student Identification Header:</h3>

<ul id="id_selector" class="selector">
    @foreach (string h in ViewBag.headers)
    {
    <li @if(h == ViewBag.GuessedIdentification){<text>class="selected"</text>}>@h</li>
    }
</ul>

</div>

<div class="selector">
<br />

<h3>Section Header <em>(optional)</em>:</h3>

<ul id="section_selector" class="selector">
    <li class="@if(ViewBag.GuessedSection == null){<text>selected</text>}> none_select"><em>None</em></li>
    @foreach (string h in ViewBag.headers)
    {
    <li @if(h == ViewBag.GuessedSection){<text>class="selected"</text>}>@h</li>
    }
</ul>

<script type="text/javascript">

    $('.selector > li').click(function () {
        $(this).siblings().removeClass("selected");
        $(this).addClass("selected");
    });

    $('#id_selector > li').click(function () {
            $('#id_column').val($(this).html());
    });

    $('#section_selector > li').click(function () {
        if (!$(this).hasClass('none_select')) {
            $('#section_column').val($(this).html());
        } else {
            $('#section_column').val(null);
        }
    });


</script>

<div id="import_roster_tools">
@using (Html.BeginForm("ApplyRoster","Roster",FormMethod.Post))
{
    <input type="hidden" id="id_column" name="idColumn" value="@ViewBag.GuessedIdentification" />
    <input type="hidden" id="section_column" name="sectionColumn" value="@ViewBag.GuessedSection" />
    <input type="submit" value="Import Roster" />
    
}

    <br />
    @Html.ActionLink("Back to Roster", "Index")
</div>
</div>
